<template>
  <div>
    <van-cell>
      <!-- 标题区域的插槽 -->
      <template #title>
        <div class="title-box">
          <!-- 标题 -->
          <span>{{title}}</span>
          <!-- 单张图片 -->
          <img src="https://ts1.cn.mm.bing.net/th?id=OIP-C.n0_p3rYRuofABd3XudbZnAHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2" alt="" class="thumb" v-if="cover.type===1">
        </div>
        <!-- 三张图片 -->
        <div class="thumb-box" v-if="cover.type===3">
          <img src="https://ts1.cn.mm.bing.net/th/id/R-C.901f8ebdab22d065baefeae6c2701cc0?rik=Z3Hew18zFaF%2bLQ&riu=http%3a%2f%2fwww.pp3.cn%2fuploads%2f20120418lw%2f13.jpg&ehk=Es5ZGH90h%2foCghvlIwdKfUiqpO05gLSgOEBU2i0Mwok%3d&risl=&pid=ImgRaw&r=0" alt="" class="thumb" v-for="(item,index) in cover.images" :key="index">
        </div>
      </template>
      <!-- label 区域的插槽 -->
      <template #label>
        <div class="label-box">
          <span>作者：{{author}} &nbsp;&nbsp;{{cmtCount}}评论 &nbsp;&nbsp; 发布日期:&nbsp;{{pubDate}}</span>
          <!-- 关闭按钮 -->
          <van-icon name="cross" />
        </div>
      </template>
    </van-cell>
  </div>
</template>
<script>
    export default {
      name:'Artical',
      props:{
        title:{
          type:String,
          default:''
        },
        author:{
          type:String,
          default:''
        },
        cmtCount:{
          type:[Number,String],
          default:''
        },
        pubDate:{
          type:String,
          default:''
        },
        cover:{
          type:Object,
        }
      }
    }
</script>

<style lang="less" scoped>
.label-box {
     display: flex;
     justify-content: space-between;
     align-items: center;
   }
   .thumb {
     // 矩形黄金比例：0.618
     width: 113px;
     height: 70px;
     background-color: #f8f8f8;
     object-fit: cover;
   }
   
   .title-box {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
   }
   
   .thumb-box {
     display: flex;
     justify-content: space-between;
   }
</style>